<script lang="ts">
import { h } from 'vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'StarryBg',
  setup() {
    return () => [
      h('div', { class: 'starry starry1' }),
      h('div', { class: ' starry starry2' }),
      h('div', { class: ' starry starry3' })
    ];
  }
});
</script>

<style scoped lang="scss">
@keyframes moveUp {
  to {
    transform: translateY(-100vh);
  }
}
.starry {
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  animation: moveUp 100s linear infinite;

  &::after {
    content: '';
    position: fixed;
    left: 0;
    top: 100vh;
    width: var(--size);
    height: var(--size);
    border-radius: inherit;
    box-shadow: inherit;
  }
}

.starry1 {
  --size: 4px;
  box-shadow: #fff 65vw 98vh, #fff 47vw 49vh, #fff 1vw 77vh, #fff 18vw 40vh, #fff 9vw 55vh, #fff 78vw 92vh,
    #fff 41vw 22vh, #fff 56vw 32vh, #fff 0vw 14vh, #fff 61vw 61vh, #fff 66vw 33vh, #fff 99vw 24vh, #fff 79vw 36vh,
    #fff 51vw 31vh, #fff 82vw 37vh, #fff 77vw 56vh, #fff 43vw 73vh, #fff 27vw 20vh, #fff 14vw 78vh, #fff 1vw 27vh,
    #fff 17vw 87vh, #fff 60vw 29vh, #fff 95vw 86vh, #fff 2vw 97vh, #fff 87vw 12vh, #fff 25vw 16vh, #fff 98vw 89vh,
    #fff 54vw 46vh, #fff 88vw 93vh, #fff 2vw 100vh, #fff 31vw 78vh, #fff 52vw 66vh, #fff 31vw 80vh, #fff 65vw 73vh,
    #fff 94vw 76vh, #fff 50vw 100vh, #fff 22vw 3vh, #fff 84vw 47vh, #fff 42vw 74vh, #fff 67vw 99vh, #fff 1vw 17vh,
    #fff 61vw 46vh, #fff 73vw 52vh, #fff 35vw 42vh, #fff 97vw 76vh, #fff 97vw 49vh, #fff 2vw 38vh, #fff 82vw 66vh,
    #fff 64vw 23vh, #fff 97vw 78vh, #fff 76vw 8vh, #fff 44vw 16vh, #fff 33vw 35vh, #fff 55vw 71vh, #fff 33vw 82vh,
    #fff 8vw 59vh, #fff 60vw 7vh, #fff 23vw 46vh, #fff 26vw 20vh, #fff 97vw 76vh, #fff 7vw 66vh, #fff 62vw 6vh,
    #fff 86vw 57vh, #fff 14vw 28vh, #fff 25vw 54vh, #fff 79vw 62vh, #fff 51vw 36vh, #fff 35vw 53vh, #fff 76vw 24vh,
    #fff 53vw 42vh, #fff 26vw 38vh, #fff 3vw 40vh, #fff 62vw 86vh, #fff 35vw 29vh, #fff 5vw 11vh, #fff 39vw 99vh,
    #fff 7vw 5vh, #fff 34vw 91vh, #fff 53vw 85vh, #fff 60vw 93vh, #fff 33vw 5vh, #fff 64vw 75vh, #fff 100vw 82vh,
    #fff 14vw 33vh, #fff 54vw 67vh, #fff 7vw 50vh, #fff 57vw 6vh, #fff 5vw 10vh, #fff 47vw 30vh, #fff 55vw 94vh,
    #fff 90vw 98vh, #fff 88vw 10vh, #fff 92vw 13vh, #fff 62vw 72vh, #fff 52vw 35vh, #fff 9vw 80vh, #fff 72vw 48vh,
    #fff 94vw 100vh, #fff 10vw 80vh, #fff 71vw 33vh, #fff 48vw 69vh, #fff 17vw 15vh, #fff 90vw 96vh, #fff 73vw 50vh,
    #fff 4vw 68vh, #fff 77vw 25vh, #fff 26vw 50vh, #fff 77vw 34vh, #fff 65vw 3vh, #fff 81vw 75vh, #fff 46vw 42vh,
    #fff 30vw 7vh, #fff 14vw 68vh, #fff 30vw 53vh, #fff 81vw 13vh, #fff 22vw 99vh, #fff 55vw 33vh, #fff 80vw 33vh,
    #fff 34vw 89vh, #fff 21vw 78vh, #fff 29vw 84vh, #fff 72vw 56vh, #fff 35vw 62vh, #fff 0vw 31vh, #fff 70vw 14vh,
    #fff 44vw 28vh, #fff 78vw 95vh, #fff 51vw 12vh, #fff 44vw 45vh, #fff 16vw 14vh, #fff 0vw 6vh, #fff 14vw 64vh,
    #fff 85vw 90vh, #fff 8vw 0vh, #fff 72vw 96vh, #fff 80vw 46vh, #fff 83vw 94vh, #fff 53vw 34vh, #fff 0vw 48vh,
    #fff 77vw 1vh, #fff 58vw 1vh, #fff 80vw 24vh, #fff 84vw 96vh, #fff 71vw 86vh, #fff 91vw 36vh, #fff 60vw 15vh,
    #fff 85vw 44vh, #fff 39vw 19vh, #fff 56vw 85vh, #fff 33vw 74vh;
}
.starry2 {
  --size: 2px;
  box-shadow: #fff 15vw 55vh, #fff 72vw 1vh, #fff 30vw 59vh, #fff 9vw 85vh, #fff 16vw 87vh, #fff 71vw 38vh,
    #fff 19vw 10vh, #fff 49vw 40vh, #fff 21vw 60vh, #fff 20vw 92vh, #fff 12vw 7vh, #fff 8vw 71vh, #fff 90vw 96vh,
    #fff 41vw 95vh, #fff 50vw 35vh, #fff 27vw 33vh, #fff 71vw 75vh, #fff 44vw 70vh, #fff 31vw 82vh, #fff 67vw 21vh,
    #fff 19vw 5vh, #fff 1vw 93vh, #fff 50vw 93vh, #fff 41vw 78vh, #fff 53vw 76vh, #fff 23vw 40vh, #fff 13vw 42vh,
    #fff 2vw 73vh, #fff 62vw 71vh, #fff 52vw 83vh, #fff 60vw 6vh, #fff 27vw 10vh, #fff 41vw 66vh, #fff 99vw 11vh,
    #fff 7vw 6vh, #fff 61vw 28vh, #fff 63vw 62vh, #fff 90vw 42vh, #fff 57vw 47vh, #fff 20vw 9vh, #fff 19vw 12vh,
    #fff 21vw 5vh, #fff 42vw 24vh, #fff 8vw 44vh, #fff 68vw 29vh, #fff 99vw 0vh, #fff 59vw 62vh, #fff 32vw 72vh,
    #fff 8vw 64vh, #fff 78vw 38vh, #fff 37vw 5vh, #fff 47vw 33vh, #fff 40vw 72vh, #fff 83vw 54vh, #fff 85vw 91vh,
    #fff 23vw 35vh, #fff 76vw 83vh, #fff 72vw 42vh, #fff 96vw 92vh, #fff 2vw 9vh, #fff 70vw 95vh, #fff 18vw 53vh,
    #fff 57vw 67vh, #fff 94vw 62vh, #fff 39vw 24vh, #fff 60vw 55vh, #fff 12vw 71vh, #fff 21vw 48vh, #fff 43vw 42vh,
    #fff 22vw 34vh, #fff 52vw 32vh, #fff 92vw 55vh, #fff 24vw 31vh, #fff 78vw 10vh, #fff 0vw 67vh, #fff 9vw 57vh,
    #fff 17vw 60vh, #fff 100vw 10vh, #fff 63vw 69vh, #fff 59vw 7vh, #fff 98vw 29vh, #fff 51vw 7vh, #fff 32vw 55vh,
    #fff 44vw 38vh, #fff 56vw 46vh, #fff 24vw 99vh, #fff 35vw 10vh, #fff 37vw 15vh, #fff 4vw 0vh, #fff 4vw 38vh,
    #fff 29vw 41vh, #fff 42vw 22vh, #fff 38vw 30vh, #fff 68vw 33vh, #fff 9vw 3vh, #fff 65vw 45vh, #fff 37vw 98vh,
    #fff 4vw 38vh, #fff 9vw 3vh, #fff 12vw 56vh, #fff 57vw 42vh, #fff 92vw 5vh, #fff 91vw 65vh, #fff 58vw 60vh,
    #fff 75vw 11vh, #fff 9vw 5vh, #fff 24vw 64vh, #fff 5vw 1vh, #fff 8vw 74vh, #fff 78vw 39vh, #fff 41vw 65vh,
    #fff 0vw 88vh, #fff 98vw 20vh, #fff 100vw 67vh, #fff 3vw 39vh, #fff 57vw 76vh, #fff 47vw 0vh, #fff 4vw 72vh,
    #fff 31vw 54vh, #fff 65vw 9vh, #fff 27vw 79vh, #fff 23vw 54vh, #fff 23vw 78vh, #fff 7vw 61vh, #fff 100vw 68vh,
    #fff 60vw 30vh, #fff 58vw 48vh, #fff 54vw 34vh, #fff 36vw 83vh, #fff 63vw 8vh, #fff 28vw 73vh, #fff 67vw 88vh,
    #fff 2vw 82vh, #fff 91vw 16vh, #fff 40vw 33vh, #fff 92vw 92vh, #fff 35vw 61vh, #fff 32vw 2vh, #fff 5vw 73vh,
    #fff 91vw 33vh, #fff 74vw 97vh, #fff 85vw 89vh, #fff 64vw 53vh, #fff 60vw 92vh, #fff 18vw 69vh, #fff 14vw 24vh,
    #fff 64vw 83vh, #fff 38vw 43vh, #fff 68vw 9vh, #fff 65vw 60vh, #fff 27vw 86vh, #fff 5vw 42vh, #fff 15vw 53vh,
    #fff 49vw 11vh, #fff 57vw 53vh, #fff 52vw 94vh, #fff 64vw 30vh, #fff 68vw 10vh, #fff 6vw 8vh, #fff 46vw 16vh,
    #fff 1vw 86vh, #fff 44vw 93vh, #fff 56vw 91vh, #fff 42vw 35vh, #fff 70vw 34vh, #fff 69vw 35vh, #fff 50vw 16vh,
    #fff 9vw 63vh, #fff 97vw 65vh, #fff 75vw 84vh;
}
.starry3 {
  --size: 1px;
  box-shadow: #fff 78vw 75vh, #fff 34vw 71vh, #fff 21vw 92vh, #fff 52vw 10vh, #fff 36vw 33vh, #fff 1vw 82vh,
    #fff 37vw 10vh, #fff 51vw 27vh, #fff 79vw 81vh, #fff 7vw 21vh, #fff 46vw 12vh, #fff 68vw 96vh, #fff 73vw 37vh,
    #fff 67vw 78vh, #fff 72vw 60vh, #fff 9vw 87vh, #fff 59vw 82vh, #fff 73vw 67vh, #fff 87vw 16vh, #fff 37vw 84vh,
    #fff 48vw 42vh, #fff 94vw 28vh, #fff 13vw 100vh, #fff 94vw 27vh, #fff 80vw 74vh, #fff 50vw 6vh, #fff 55vw 14vh,
    #fff 22vw 69vh, #fff 90vw 93vh, #fff 43vw 15vh, #fff 30vw 37vh, #fff 82vw 1vh, #fff 75vw 52vh, #fff 89vw 72vh,
    #fff 82vw 33vh, #fff 91vw 5vh, #fff 91vw 14vh, #fff 47vw 17vh, #fff 77vw 58vh, #fff 33vw 85vh, #fff 26vw 98vh,
    #fff 72vw 16vh, #fff 65vw 43vh, #fff 58vw 76vh, #fff 88vw 25vh, #fff 81vw 21vh, #fff 92vw 84vh, #fff 94vw 45vh,
    #fff 16vw 26vh, #fff 65vw 77vh, #fff 39vw 26vh, #fff 99vw 56vh, #fff 22vw 50vh, #fff 63vw 46vh, #fff 20vw 52vh,
    #fff 31vw 11vh, #fff 6vw 73vh, #fff 38vw 18vh, #fff 72vw 80vh, #fff 96vw 21vh, #fff 7vw 79vh, #fff 76vw 82vh,
    #fff 84vw 68vh, #fff 13vw 83vh, #fff 98vw 7vh, #fff 18vw 62vh, #fff 5vw 28vh, #fff 16vw 37vh, #fff 23vw 43vh,
    #fff 96vw 20vh, #fff 23vw 40vh, #fff 57vw 27vh, #fff 21vw 27vh, #fff 13vw 49vh, #fff 78vw 70vh, #fff 84vw 4vh,
    #fff 75vw 45vh, #fff 35vw 32vh, #fff 45vw 90vh, #fff 8vw 41vh, #fff 63vw 1vh, #fff 91vw 65vh, #fff 94vw 46vh,
    #fff 59vw 95vh, #fff 89vw 39vh, #fff 24vw 34vh, #fff 19vw 1vh, #fff 12vw 40vh, #fff 34vw 62vh, #fff 45vw 57vh,
    #fff 37vw 14vh, #fff 58vw 89vh, #fff 44vw 80vh, #fff 78vw 5vh, #fff 29vw 47vh, #fff 16vw 55vh, #fff 74vw 13vh,
    #fff 35vw 64vh, #fff 51vw 64vh, #fff 98vw 86vh, #fff 48vw 62vh, #fff 43vw 62vh, #fff 84vw 97vh, #fff 49vw 74vh,
    #fff 8vw 83vh, #fff 26vw 9vh, #fff 86vw 83vh, #fff 54vw 24vh, #fff 30vw 8vh, #fff 42vw 89vh, #fff 26vw 75vh,
    #fff 2vw 37vh, #fff 36vw 20vh, #fff 92vw 16vh, #fff 84vw 61vh, #fff 59vw 82vh, #fff 87vw 79vh, #fff 95vw 64vh,
    #fff 38vw 55vh, #fff 75vw 47vh, #fff 32vw 83vh, #fff 61vw 98vh, #fff 16vw 96vh, #fff 60vw 67vh, #fff 50vw 27vh,
    #fff 35vw 45vh, #fff 85vw 65vh, #fff 49vw 27vh, #fff 38vw 85vh, #fff 44vw 43vh, #fff 2vw 22vh, #fff 66vw 75vh,
    #fff 50vw 90vh, #fff 42vw 1vh, #fff 11vw 63vh, #fff 79vw 22vh, #fff 37vw 1vh, #fff 37vw 60vh, #fff 77vw 18vh,
    #fff 37vw 97vh, #fff 72vw 12vh, #fff 22vw 96vh, #fff 21vw 86vh, #fff 16vw 86vh, #fff 59vw 26vh, #fff 37vw 54vh,
    #fff 40vw 19vh, #fff 79vw 68vh, #fff 28vw 29vh, #fff 8vw 42vh, #fff 7vw 49vh, #fff 70vw 3vh, #fff 41vw 0vh,
    #fff 58vw 75vh, #fff 62vw 27vh, #fff 99vw 19vh, #fff 66vw 32vh, #fff 82vw 33vh, #fff 25vw 98vh, #fff 73vw 11vh,
    #fff 51vw 63vh, #fff 60vw 54vh, #fff 20vw 52vh, #fff 7vw 97vh, #fff 60vw 58vh, #fff 14vw 84vh, #fff 55vw 13vh,
    #fff 25vw 3vh, #fff 77vw 36vh, #fff 71vw 18vh, #fff 75vw 5vh, #fff 11vw 5vh, #fff 66vw 61vh, #fff 50vw 80vh,
    #fff 41vw 22vh, #fff 77vw 26vh, #fff 42vw 0vh, #fff 6vw 54vh, #fff 9vw 9vh, #fff 51vw 47vh, #fff 68vw 18vh,
    #fff 22vw 4vh, #fff 1vw 77vh, #fff 27vw 53vh, #fff 88vw 53vh, #fff 71vw 4vh, #fff 21vw 90vh, #fff 86vw 12vh,
    #fff 71vw 86vh, #fff 76vw 39vh, #fff 74vw 39vh, #fff 95vw 3vh, #fff 27vw 19vh, #fff 69vw 6vh, #fff 82vw 53vh,
    #fff 54vw 86vh, #fff 75vw 58vh, #fff 78vw 12vh, #fff 73vw 39vh, #fff 22vw 18vh;
}
</style>
